<template>
  <div>
    <button @click="isshow=true">打开模态框</button>
     <teleport to="body">
      <div class="dialog" v-if="isshow">
       <div>模态框</div>
       <div>模态框</div>
       <div>模态框</div>
       <div>模态框</div>
       <div>模态框</div>
       <div>模态框</div>
       <div>模态框</div>
       <div>模态框</div>
       <div>模态框</div>
       <div>模态框</div>
       <div>模态框</div>
       <div>模态框</div>
       <div>模态框</div>
       <button @click="isshow=false">关闭</button>
    </div>
     </teleport>
  </div>
</template>

<script lang='ts'>
import {ref,reactive} from 'vue'
export default{
 setup(){
  let isshow=ref<Boolean>(false)
  return{isshow}
 }
}
</script>

<style lang='scss' scoped>
  .dialog{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 200px;
    height: 300px;
    background-color: orange;
    border-radius: 15px;
  }
</style>